<template>
  <el-row class="IoSpeakingWriting-box">
    <el-col :span="24" class="IoSpeakingWriting-page">
      <div
        id="IoWrite"
        class="linePage ScaleCSSViewport_unzoom"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#021033"
      ></div>
    </el-col>
    <el-col :span="24" class="IoSpeakingWriting-file">
      <span class="LoadFile"
        >IO 写 ：{{ this.write ? this.write + " MB" : "0" + " MB" }}
      </span>
    </el-col>
  </el-row>
</template>>

<script>
import { SqlIoreadWrite } from "@/api/index.js";
import bus from "common/bus.js";
import { Line } from "@antv/g2plot";

export default {
  data() {
    return {
      selectedMonID: "",
      timerName: "MsSqlIoWrite",
      timerEventName: "MsSqltimerIoWrite",
      timerInterval: 1000 * 30,
      lineItem: "",
      lineData: [],
      write: "",
      loading:false,
    };
  },
  created() {
    bus.$on("selectedMonIDSqlServer", (msg) => {
      this.resetData()
      // 获取数据
      this.selectedMonID = msg;


          this.initGetData()
      // this.getData();
    });
    // this.initGetData();
    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });
     bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {

                this.initGetData();
            }
        });
  },
  mounted() {
    this.initLine();
  },
  computed: {},
  methods: {
    initGetData() {
      // this.loading=true
      SqlIoreadWrite({ dbServername: this.selectedMonID.DBNAME,ip:this.selectedMonID.IP })
        .then((res) => {
          let sum = res.reduce((prev, cur) => {
            return parseInt(prev) + parseInt(cur.writedata);
          }, 0);
          this.write = parseInt(sum / res.length);
          this.lineData = res.map((item) => {
            return {
              Date: item.RecordTime,
              scales: parseInt(item.writedata),
            };
          });
          if (res.length == 0) {
            //  this.lineItem.changeData([]);
            // this.lineData=[]
            this.lineItem.update({ data: [] });
          } else {
            this.lineItem.changeData(this.lineData);
          }
        })
        .catch((_) => {})
        .finally((_) => {});
    },
    // getData() {
    //   this.loading=true
    //   SqlIoreadWrite({ dbServername: this.selectedMonID.DBNAME,ip:this.selectedMonID.IP })
    //     .then((res) => {
    //       let sum = res.reduce((prev, cur) => {
    //         return parseInt(prev) + parseInt(cur.writedata);
    //       }, 0);
    //       this.write = parseInt(sum / res.length);
    //       this.lineData = res.map((item) => {
    //         return {
    //           Date: item.RecordTime,
    //           scales: parseInt(item.writedata),
    //         };
    //       });
    //       //  console.log(res.length)
    //       if (res.length == 0) {
    //         this.lineItem.update({ data: [] });
    //         //  this.lineData=[]
    //       } else {
    //         this.lineItem.changeData(this.lineData);
    //       }
    //     })
    //     .catch((_) => {})
    //     .finally((_) => {this.loading=false});
    // },
    initLine() {
      this.lineItem = new Line("IoWrite", {
        data: this.lineData,
        padding: "auto",
        xField: "Date",
        yField: "scales",
        height: 110* this.ZOOM,
        // xAxis: {
        //   // type: 'timeCat',
        //   tickCount: 30,
        // },
        // padding:20,
        xAxis: false,
        tooltip: {
          formatter: (datum) => {
            return { name: "大小", value: datum.scales + "MB" };
          },
        },
      });

      this.lineItem.render();
    },
    resetData() {
      this.lineData = [];
      this.write="",
      this.lineItem.changeData(this.lineData);
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    this.lineItem.destroy();
    bus.$off('selectedMonIDSqlServer')
  },
};
</script>
<style scoped>
.IoSpeakingWriting-box {
  height: 100%;
}
.IoSpeakingWriting-page {
  height: 72%;
  width: 100%;
}
.linePage {
  height: 100%;
  width: 100%;
}
.IoSpeakingWriting-file {
  height: 30%;
  width: 100%;
  text-align: center;
}
</style>